const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')   // 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');  // 
const {CleanWebpackPlugin} = require('clean-webpack-plugin');  // 
const CopyWebpackPlugin = require('copy-webpack-plugin')   // 
// const ESLintPlugin = require('eslint-webpack-plugin')
module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'[name].js' // 定义一个变量导出
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[{loader:MiniCssExtractPlugin.loader},'css-loader',"postcss-loader"]
            }
        ]
    },
    plugins:[// 所有plugins 都需要配置在plugins配置项里
        new HtmlWebpackPlugin({
            title:'My App', // 设置 打包之后的title
            filename:'index.html', // 打包之后的html名称
            template:'./src/public/index.html' // 要打包的模版
        }),
        new MiniCssExtractPlugin({  // 配置 提取css的 插件
            filename:'[name].css' // 生存一个变量css名称
        }),
        // new ESLintPlugin()
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [{
                from: "src/static",
                to: "static"
            }],
        })

    ],devServer: {
        // 自动开启浏览器
        open: true,
        // 端口
        port: 8081,
        liveReload: true,//启动自动更新
        proxy: {
            '/api': {
                target: 'http://localhost:8787',
                pathRewrite: { '^/api': '' }
              }
          }
    }
}